import React from 'react';
import './square.css';
//生命周期
class ReactLife extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        value: "点击变化",
      };
    }
    
    componentWillMount(){
      console.log("componentWillMount=ReactLife=我来了",this);
    }
    componentDidMount(){
      console.log("componentDidMount=ReactLife=我来了",this);
    }
    shouldComponentUpdate(){
      console.log("shouldComponentUpdate=ReactLife=我来了",this);
      // console.log(this.state.value);
      // return this.state.value > 20 ? true : false;
      return true;
    }
    componentWillUpdate(){
      console.log("componentWillUpdate=ReactLife=我来了",this);
    }
    /***
     * ReactLife uses getDerivedStateFromProps() but also contains the following legacy lifecycles:
      componentWillMount
      componentWillReceiveProps
      componentWillUpdate
     * 
     */
    static getDerivedStateFromProps(nextProps, prevState) {
      // if (nextProps.isLogin !== prevState.isLogin) {
      //   return {
      //     isLogin: nextProps.isLogin,
      //   };
      // }
      console.log("getDerivedStateFromProps=ReactLife=我来了",nextProps,prevState,this);
      // return { value:333 };
      return null;
    }
    componentDidUpdate(){
      console.log("componentDidUpdate=ReactLife=我来了",this);
    }
    componentWillReceiveProps(){
      console.log("componentWillReceiveProps=ReactLife=我来了",this);
    }
    componentWillUnmount(){
      console.log("componentWillUnmount=ReactLife=我来了",this);
    }
    deleteRow(id,e){
      console.log("id=",id,"，e=",e);
    }
    render() {
      console.log("render=ReactLife=我来了",this);
      return (
        <div className="square">
          <div>点击改变值ReactLife：</div>
          <button
            onClick={() => this.setState({value: Math.random(100)*100})}
          >
            {this.state.value}
          </button>
          <br/>
          <button onClick={(e) => this.deleteRow(0, e)}>Delete Row -- e</button>
          <br/>
          <button onClick={this.deleteRow.bind(this, 1)}>Delete Row -- bind</button> 
        </div>
      );
    }
  }

  export default ReactLife;